<template>
	<div class="recommend-page">
		<div class="page-header">
			<h1>推荐歌单</h1>
			<p>为你精选优质歌单</p>
		</div>

		<!-- 分类标签 -->
		<div class="category-tags">
			<el-tag
				v-for="tag in categories"
				:key="tag"
				:type="selectedCategory === tag ? '' : 'info'"
				:effect="selectedCategory === tag ? 'dark' : 'plain'"
				@click="selectedCategory = tag"
				class="category-tag"
			>
				{{ tag }}
			</el-tag>
		</div>

		<!-- 歌单列表 -->
		<div class="playlist-grid">
			<div
				v-for="item in playlists"
				:key="item.id"
				class="playlist-card"
				@click="handlePlaylistClick(item.id)"
			>
				<div class="playlist-cover">
					<img :src="item.cover" :alt="item.name" />
					<div class="play-overlay">
						<el-icon :size="50" class="play-icon">
							<VideoPlay />
						</el-icon>
					</div>
					<div class="play-count">
						<el-icon><Headset /></el-icon>
						{{ formatCount(item.playCount) }}
					</div>
				</div>
				<div class="playlist-info">
					<div class="playlist-name">{{ item.name }}</div>
					<div class="playlist-creator">by {{ item.creator }}</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { useRouter } from 'vue-router';
import { VideoPlay, Headset } from '@element-plus/icons-vue';

const router = useRouter();

const selectedCategory = ref('全部');

const categories = ref([
	'全部', '华语', '欧美', '日语', '韩语', '粤语', '流行', '摇滚', '民谣', '电子', '轻音乐', '古典'
]);

const playlists = ref([
	{ id: 1, name: '华语流行精选', creator: '小明', cover: 'https://images.unsplash.com/photo-1493225457124-a3eb161ffa5f?w=200&h=200&fit=crop', playCount: 128500 },
	{ id: 2, name: '欧美经典', creator: '小红', cover: 'https://images.unsplash.com/photo-1510915361894-db8b60106cb1?w=200&h=200&fit=crop', playCount: 98600 },
	{ id: 3, name: '日系音乐', creator: '小李', cover: 'https://images.unsplash.com/photo-1507838153414-b4b713384a76?w=200&h=200&fit=crop', playCount: 76300 },
	{ id: 4, name: '轻音乐合集', creator: '小张', cover: 'https://images.unsplash.com/photo-1459749411175-04bf5292ceea?w=200&h=200&fit=crop', playCount: 156800 },
	{ id: 5, name: '电音专区', creator: '小王', cover: 'https://images.unsplash.com/photo-1571330735066-03aaa9429d89?w=200&h=200&fit=crop', playCount: 89200 },
	{ id: 6, name: '民谣精选', creator: '小陈', cover: 'https://images.unsplash.com/photo-1511379938547-c1f69419868d?w=200&h=200&fit=crop', playCount: 112300 },
	{ id: 7, name: '摇滚时代', creator: '小刘', cover: 'https://images.unsplash.com/photo-1498038432885-c6f3f1b912ee?w=200&h=200&fit=crop', playCount: 95400 },
	{ id: 8, name: '古典音乐', creator: '小赵', cover: 'https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=200&h=200&fit=crop', playCount: 67800 }
]);

const formatCount = (count: number): string => {
	if (count >= 10000) {
		return (count / 10000).toFixed(1) + '万';
	}
	return count.toString();
};

const handlePlaylistClick = (id: number) => {
	router.push(`/playlist/${id}`);
};
</script>

<style scoped lang="scss">
.recommend-page {
	padding: 30px;

	.page-header {
		margin-bottom: 30px;

		h1 {
			font-size: 32px;
			font-weight: 600;
			color: #333;
			margin: 0 0 10px 0;
		}

		p {
			font-size: 14px;
			color: #999;
			margin: 0;
		}
	}

	.category-tags {
		display: flex;
		flex-wrap: wrap;
		gap: 12px;
		margin-bottom: 30px;

		.category-tag {
			cursor: pointer;
			transition: all 0.3s;

			&:hover {
				transform: translateY(-2px);
			}
		}
	}

	.playlist-grid {
		display: grid;
		grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
		gap: 24px;

		.playlist-card {
			cursor: pointer;
			transition: all 0.3s;

			&:hover {
				transform: translateY(-5px);

				.play-overlay {
					opacity: 1;
				}
			}

			.playlist-cover {
				position: relative;
				width: 100%;
				padding-bottom: 100%;
				border-radius: 12px;
				overflow: hidden;
				box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);

				img {
					position: absolute;
					top: 0;
					left: 0;
					width: 100%;
					height: 100%;
					object-fit: cover;
				}

				.play-overlay {
					position: absolute;
					top: 0;
					left: 0;
					right: 0;
					bottom: 0;
					background: rgba(0, 0, 0, 0.5);
					display: flex;
					align-items: center;
					justify-content: center;
					opacity: 0;
					transition: all 0.3s;

					.play-icon {
						color: #fff;
					}
				}

				.play-count {
					position: absolute;
					top: 10px;
					right: 10px;
					display: flex;
					align-items: center;
					gap: 4px;
					color: #fff;
					font-size: 12px;
					background: rgba(0, 0, 0, 0.6);
					padding: 4px 10px;
					border-radius: 12px;
				}
			}

			.playlist-info {
				margin-top: 12px;

				.playlist-name {
					font-size: 14px;
					font-weight: 500;
					color: #333;
					overflow: hidden;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-line-clamp: 2;
					-webkit-box-orient: vertical;
					line-height: 1.5;
					margin-bottom: 4px;
				}

				.playlist-creator {
					font-size: 12px;
					color: #999;
				}
			}
		}
	}
}
</style>
